<template>
  <div>
    <el-tooltip class="talk_to_wrap" effect="light" content="联系客服" placement="left">
      <div @click="talkTo" class="el-icon-service"></div>
    </el-tooltip>
    <el-tooltip class="to_top" effect="light" content="回到顶部" placement="left">
      <div @click="toTop" class="el-icon-arrow-up"></div>
    </el-tooltip>
    <div class="talk_main" v-if="isShow">
      <header><span>疑问</span><span class="close" @click="close">x</span></header>
      <section class="qus_wrap">
        <ul>
          <li :class="{active:isActive==item.qid}" v-for="item in qus" @click="getAnswer(item.qid)" :key="item.qid">{{item.question}}</li>
        </ul>
        <div class="answer">
          <span v-if="answer.qq">
            <a target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+answer.qq+'&site=qq&menu=yes'">
              <img style="width:20px;height:20px;" border="0" :src="'http://wpa.qq.com/pa?p=2:'+ answer.qq + ':52'" alt="点击这里给我发消息" title="点击这里给我发消息"/>
              {{answer.answer}}
            </a>
            或者拨打电话：{{answer.phone}}
          </span>
          <span v-else>{{answer.answer}}</span>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isShow:false,
      qus:[],
      answer:'',
      isActive:'',
    }
  },
  methods:{
    toTop(){
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    talkTo(){
      this.isShow = true;
      this.GLOBAL.tokenRequest({
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'chats/que',
      }).then(({data:data})=>{
        this.qus = data;
      })
    },
    close(){
      this.isShow = false;
    },
    getAnswer(qid){
      if (qid==this.isActive) {
        return;
      }
      this.isActive = qid;
      this.GLOBAL.tokenRequest({
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'chats/ans',
        param:{
          qid,
        }
      }).then(({data:data})=>{
        this.answer = data;
      })
    }
  }
}
</script>
<style scoped>
.close{
  color:red;
  cursor: pointer;
}
.qus_wrap li.active{
  color:#057ec7;
}
.talk_to_wrap, .to_top{
  position: fixed;
  bottom:150px;
  right:50px;
  width:30px;
  height:30px;
  border-radius: 50%;
  border:1px solid #c1c1c1;
  cursor: pointer;
  background-color: #fff;
  opacity: 0.3;
}
.to_top{
  bottom:190px;
}
.talk_to_wrap:hover, .to_top:hover{
  opacity: 1;
}
.el-icon-service::before,.el-icon-arrow-up::before{
  text-align: center;
  font-size: 30px;
}
.talk_main{
  width:500px;
  height:350px;
  background-color: #fff;
  position: fixed;
  border:1px solid #057ec7;
  border-radius: 10px;
  bottom:240px;
  left:calc(50% - 250px);
  z-index: 9999;
}
.talk_main header{
  font:16px/26px "微软雅黑";
  padding:0 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #057ec7;
}
.qus_wrap{
  padding:15px;
  box-sizing: border-box;
}
.qus_wrap li{
  font:14px/32px "微软雅黑";
  cursor: pointer;
  color:#313131;
}
.qus_wrap li:hover{
  color:#057ec7;
}
.answer{
  margin-top:20px;
}
.answer a, .answer span{
  font:14px/24px "微软雅黑";
  color:#057ec7;
}
</style>


